/* 主页内容 */
.main_total {
    width: 80vw;
    margin: 0 auto;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.main_content {
    width: 80vw;
    height: 100%;
    z-index: 0;
    transition: all 0.5s;
}

.main_content>ul {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 0.4vw;
}

.main_content>ul>li {
    border-radius: 5px;
    background: rgba(255, 255, 255, .3);
    opacity: .8;
    transition: all .3s;
}

.main_content>ul>li:hover {
    opacity: 1;
}

.main_content>ul>li:first-child {
    grid-column: 1/3;
    grid-row: 1/2;
}

.main_content>ul>li:nth-child(4) {
    grid-column: 5/7;
    grid-row: 1/2;
}

.main_content>ul>li:nth-child(8) {
    grid-column: 3/5;
    grid-row: 2/4;
}

.main_content>ul>li:nth-child(9) {
    grid-column: 5/8;
    grid-row: 2/4;
}

.main_content>ul>li:nth-child(10) {
    grid-column: 1/4;
    grid-row: 4/5;
}

.main_content>ul>li:last-child {
    grid-column: 4/8;
    grid-row: 4/5;
}

/* 响应式尝试 */


@media screen and (max-width: 986px) {
    .main_content>ul {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 0.4vw;
    }

    .main_content>ul>li:nth-child(5) {

        display: none;
    }

    .main_content>ul>li:nth-child(11) {

        display: none;
    }

    .main_content>ul>li:nth-child(12) {

        display: none;
    }

    .main_content>ul>li:nth-child(6) {
        grid-column: 1/2;
        grid-row: 2/3;
    }

    .main_content>ul>li:nth-child(7) {
        grid-column: 1/2;
        grid-row: 3/4;
    }

    .main_content>ul>li:nth-child(9) {
        grid-column: 4/7;
        grid-row: 2/4;
    }

    .main_content>ul>li:nth-child(8) {
        grid-column: 2/4;
        grid-row: 2/4;
    }

    .main_content>ul>li:last-child {
        grid-column: 4/7;
        grid-row: 4/5;
    }
}

@media screen and (max-width: 750px) {

    /* body {
        background-color: red;
    } */
    .main_content {
        width: 80vw;
        height: 500px;
        z-index: 10;
    }

    .main_content>ul {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(6, 1fr);
        gap: 0.4vw;
    }

    .main_content>ul>li {
        border-radius: 5px;
        background: rgba(255, 255, 255, .3);
    }

    .main_content>ul>li:first-child {
        grid-column: 1/3;
        grid-row: 1/2;
    }

    .main_content>ul>li:nth-child(3) {
        grid-column: 1/2;
        grid-row: 2/4;
    }

    .main_content>ul>li:nth-child(4) {
        grid-column: 2/4;
        grid-row: 2/3;
    }

    .main_content>ul>li:nth-child(6) {
        grid-column: 1/2;
        grid-row: 5/6;
    }

    .main_content>ul>li:nth-child(5) {
        /* grid-column: 3/4;
        grid-row: 9/10; */
        display: none;
    }

    .main_content>ul>li:nth-child(7) {
        grid-column: 1/2;
        grid-row: 4/5;
    }

    .main_content>ul>li:nth-child(8) {
        grid-column: 2/4;
        grid-row: 3/6;
    }

    .main_content>ul>li:nth-child(9) {
        /*   grid-column: 1/4;
        grid-row: 5/8; */
        display: none;
    }

    .main_content>ul>li:nth-child(10) {
        /* grid-column: 1/4;
        grid-row: 7/8; */
        display: none;
    }

    .main_content>ul>li:nth-child(11) {

        display: none;
    }

    .main_content>ul>li:nth-child(12) {

        display: none;
    }

    .main_content>ul>li:last-child {
        grid-column: 1/4;
        grid-row: 6/7;
    }
}